<!DOCTYPE HTML>  
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
	function $$(id) {
		return document.getElementById(id);
	}
	
	function set(type) {
		var name, value;
		
		if (type == 'session') {
			name = $$('name1').value;
			value =  $$('value1').value;
			sessionStorage.setItem(name, value);
		} else if (type == 'local') {
			name = $$('name2').value;
			value =  $$('value2').value;
			localStorage.setItem(name, value);
		}
	}
	
	function get(type) {
		var name;
		if (type == 'session') {
			name = $$('name1').value;
			alert(sessionStorage.getItem(name));
		} else if (type == 'local') {
			name = $$('name2').value;
			alert(localStorage.getItem(name));
		}		
	}
</script>

</head>
<body>
    name: <input type="text" id="name1"/>
    value: <input type="text" id="value1"/>
    <button onclick="set('session')">session set</button>
    <button onclick="get('session')">session get</button> <br/>
    
    name: <input type="text" id="name2"/>
    value: <input type="text" id="value2"/>
    <button onclick="set('local')">local set</button>
    <button onclick="get('local')">local get</button>
    
        <br>
    <a href="html5_b.html" target="_self">html5_b (_self)</a>
    <a href="html5_b.html" target="_blank">html5_b (_blank)</a>
    
    
    
    
    
    
    
</body>
</html>